<template>
  <div class="app-container cluesWrap">
    <div class="title">
      <span class="span-1">线索管理</span>
      <el-input v-model="searchValue" class="search-input" placeholder="线索名称/手机/电话" size="small"
        style="position: absolute;left: 150px;"><i slot="suffix" class="el-input__icon el-icon-search"
          @click="btnSearch"></i></el-input>
      <div>
        <el-button type="primary" size="small" @click="addClue()">新建线索</el-button>
        <el-button>查重</el-button>
        <el-button style="padding: 0 !important;" @click="clickImport"><svg-icon icon-class="import" class="import" /></el-button>
        <el-button style="padding: 0 !important;" @click="clickExport"><svg-icon icon-class="exporter" class="import" /></el-button>
        <!-- <el-dropdown class="topDrop" trigger="click">
          <el-button icon="el-icon-more" class="dropdown-btn" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-import">导入</el-dropdown-item>
            <el-dropdown-item icon="el-import">导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
    </div>
    <div class="shadowShell" style="background-color: #FFFFFF;margin-top: 25px;">
      <div class="searchBox" style="padding: 20px;">
        <el-button v-if="showdeleteBtn" style="margin-right: 10px;" @click="deleteRow()"><i
            class="el-icon-delete"></i></el-button>

        <!-- 场景 -->
        <div class="options-wrap">
          <!-- <span class="options-label">显示：</span> -->
          <el-button v-for="item in cluesList.filter((res) => res.isSystem != 0)" :key="item.id"
            :class="activeSceneId == item.id ? 'activeScene' : 'scene'" @click="sceneClick(item, 'clearSceneName')">
            {{ item.name }}
          </el-button>

          <el-dropdown trigger="click" style="margin-left: 10px;">
            <el-button size="small" :class="activeSceneName ? 'activeScene' : 'scene'">
              {{ activeSceneName }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" class="commonDropdown">
              <el-dropdown-item v-for="item in cluesList.filter((res) => res.isSystem != 1)" :key="item.id"
                :class="activeSceneId == item.id ? 'activeScene' : 'scene'"
                @click.native="sceneClick(item, 'setSceneName')">
                {{ item.name }}
              </el-dropdown-item>
              <el-dropdown-item class="last" @click.native="setScene()">
                <i class="el-icon-s-tools"></i>
                <span>场景设置</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 高级筛选 -->
        <div>
          <table-header-filters ref="tableHeaderFilters" @filter-change="filterChange" :addType="addType" />
        </div>
      </div>
      <!-- 表格 -->
      <div style="padding: 20px;padding-top: 0;">
        <clueTable ref="clueTable" @selection-change="getRow" @showDrawer="showDrawerFun" @pagination="pagination"
          :headData="headData" :tableData="tableData" :total="total" @star="starClue" :loadding="loadding" @showFilter="showFilter" />
      </div>
    </div>
    <!-- 抽屉 -->
    <clueInfoDrawer ref="clueInfoDrawer" @saveSubmit="saveSubmit" @star="starClue" @drawerInfo="drawerInfo" />
    <!-- 场景 -->
    <sceneDialog ref="sceneDialog" :tabs="tabs" :addType="addType" @RefreshScene="RefreshScene" />
    <!-- 新建线索 -->
    <addDialog ref="addDialog" :action="createAction" @saveSubmit="saveSubmit" :addType="addType" dialogTitle="新建线索" />
    <!-- 导入 -->
    <GlobalImport ref="GlobalImport"></GlobalImport>
    <!-- 导出 -->
    <GlobalExport ref="GlobalExport"></GlobalExport>
  </div>
</template>
<script>
// 表格
import clueTable from '@/components/clueManage/clues/clueTable'
// 高级筛选
import TableHeaderFilters from '@/components/FieldFilters/TableHeaderFilters'
// 抽屉
import clueInfoDrawer from '@/components/clueManage/clueInfoDrawer/index'
// 全局导入
import GlobalImport from '@/components/GlobalImportExport/GlobalImport.vue'
// 全局导出
import GlobalExport from '@/components/GlobalImportExport/GlobalExport.vue'
// 场景管理
import sceneDialog from '@/components/DialogCustom/sceneDialog.vue'
// 新增和编辑弹框
import addDialog from '@/components/DialogCustom/addDialog.vue'
import { queryPageList, getCluesListHead, addClue, getCluesList, queryScene, deleteByIds, updateClue, starClue, transferCustom } from "@/api/clue/clue";
import { queryListHead } from "@/api/customer/common";
export default {
  name: 'clues',
  components: {
    clueTable,
    TableHeaderFilters,
    clueInfoDrawer,
    addDialog,
    GlobalImport,
    GlobalExport,
    sceneDialog
  },
  data() {
    return {
      searchValue: '',
      cluesList: [],
      tabs: [],
      activeSceneId: '',
      activeSceneName: '',
      loading: false,
      setSceneDialogVisible: false,
      sceneValue: [],
      sfOpen: false,
      fieldList: [],
      exportFields: [],
      filterObj: { form: [], obj: [] }, // 筛选确定数据 form 是展示数组  obj 是上传数据
      // 接口
      createAction: {
        type: 'save',
        id: '',
        data: {}
      },
      showdeleteBtn: false,
      headData: [],
      tableData: [],
      total: 0,
      createAction: {
        type: 'save',
        id: '',
        data: {}
      },
      addType: this.$GlobalStatus.tableType.Clue,
      params: {
        label: this.$GlobalStatus.tableType.Clue,
        pageSize: 15,
        pageNum: 1,
        sceneId: undefined,
        search: ''
      },
        loadding:true
    }
  },
  mounted() {
    this.getField();
    this.queryList();
    this.queryScene();
    this.queryListHead();
  },
  methods: {
    //搜索框搜索
    btnSearch() {
      this.queryList();
    },
    // 筛选
    showFilter(row) {
      this.$refs.tableHeaderFilters.showFilterClick(row);
    },
    // 场景
    queryScene() {
      queryScene(this.addType).then(res => {
        this.cluesList = res.data;
        this.tabs = this.cluesList;
        this.avtiveSceneId = this.tabs[0].id
        this.activeSceneName = this.tabs[0].isSystem == 1 ? '' : this.tabs[0].name;
      }).catch(error => {

      })
    },
    RefreshScene() {
      this.queryScene();
    },
    //点击场景
    sceneClick(item) {
      this.params.sceneId = item.id;
      this.queryListHead();
      this.queryList();
      this.activeSceneId = item.id
      this.activeSceneName = item.isSystem == 1 ? '' : item.name;
    },
    // 显示抽屉
    showDrawerFun(val) {
      this.$refs.clueInfoDrawer.show(val);
    },
    queryListHead() {
      queryListHead(this.addType).then(res => {
        this.headData = res.data;
      }).catch(error => {

      })
    },
    // 场景设置
    setScene() {
      this.$refs.sceneDialog.showFun();
    },
    //导入
    clickImport() {
      this.$refs.GlobalImport.showCRMImport = true
    },
    //导出
    clickExport() {
      this.$refs.GlobalExport.showCRMExport = true
    },
    /**
    * 获取高级筛选字段数据
    */
    getFilterFieldInfo(showFilter = false) {
      const params = {}
      if (this.isSeas) {
        params.poolId = this.poolId
      } else {
        params.label = moduleType[this.crmType]
      }

      const request = this.isSeas ? crmCustomerPoolQueryPoolFieldAPI : filterIndexfieldsAPI

      request(params)
        .then(res => {
          const resData = res.data
          if (this.props && this.props.ignoreFilterFields) {
            const { ignoreFilterFields } = this.props
            this.fieldList = resData.filter(item => !ignoreFilterFields.includes(item.fieldName))
          } else {
            this.fieldList = resData
          }

          // 查询外露条件
          if (!showFilter) {
            const exportFields = []
            this.fieldList.forEach(item => {
              if (item.isOut === 1) {
                const copyItem = objDeepCopy(item)
                exportFields.push(this.getAdvancedFilterDefaultItemByFormType(copyItem))
              }
            })
            this.filterObj.form = exportFields
          }
          this.showFilter = showFilter
        })
        .catch(() => { })
    },
    filterChange(formList) {
      this.params.searchList = formList;
      this.queryList();
    },

    pagination(pageNum) {
      this.params.pageNum = pageNum;
      this.queryList();
    },
    getRow(val) {
      this.rowList = val
      if (val.length > 0) {
        this.showdeleteBtn = true
      } else {
        this.showdeleteBtn = false
      }
    },
    // 关注线索
    starClue(row) {
      starClue(row.id).then(res => {
        if (res.code == 0) {
          this.$refs.clueTable.toggleStarOk(row);
        }
      }).catch(error => {
      });
    },
    // 三点方法
    drawerInfo(type, id) {
      if (type == "2") {
        this.deleteRow(id);
      }
      // 转化为客户
      if (type == "1") {
        this.transferCustom(id)
        // transferCustom(id).then(res => {

        // })
      }

    },
    transferCustom(id) {
      let title = "确定将该线索转换为客户吗?"
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        let rowIds = [];
        if (id) {
          rowIds.push(id)
        } else {
          this.rowList.forEach(element => {
            rowIds.push(element.id)
          });
        }
        var params = {
          ids: rowIds
        }
        transferCustom(params).then(res => {
          this.loading = false;
          // this.$refs.clueInfoDrawer.close()
          this.$message({
            type: 'success',
            message: '成功转为客户!'
          });
          this.queryList();
        }).catch(error => {
          this.loading = false;
        });

      })
        .catch(() => {
          this.loading = false;
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        });
    },
    // 接口方法
    //删除row
    deleteRow(id) {
      let title = "确定删除选中数据吗?";
      if (id) {
        title = "确定删除该数据吗?";
      }
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          let rowIds = [];
          if (id) {
            rowIds.push(id)
          } else {
            this.rowList.forEach(element => {
              rowIds.push(element.id)
            });
          }
          var params = {
            ids: rowIds
          }
          deleteByIds(params).then(res => {
            this.loading = false;
            this.$refs.clueInfoDrawer.close()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryList();
          }).catch(error => {
            this.loading = false;
          });

        })
        .catch(() => {
          this.loading = false;
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        });
    },
    // 查询表头
    getField() {
      //新建线索字段
      this.loading = true;
      getCluesList(this.addType).then(res => {
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      })
      //表格head数据
      getCluesListHead(this.addType).then(res => {
        this.headData = res.data
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      })
    },
    // 查询表数据
    queryList() {
      queryPageList(this.params).then(res => {
        this.tableData = res.data.records;
        this.loadding=false
        this.total = Number.parseInt(res.data.total);
      }).catch(error => {
        this.loading = false;
      });
    },
    // 新建线索
    addClue() {
      this.createAction = {
        type: 'save',
        id: '',
        data: {}
      }
      this.$refs.addDialog.showFun();
    },
    //保存
    saveSubmit(params) {
      this.loading = true;
      // id不为空 新增
      if (params.entity.id) {
        updateClue(params).then(res => {
          this.$refs.clueInfoDrawer.closeAddFun();
          this.queryList();
        }).catch(error => {
          this.$refs.addDialog.closeLoading();
        })
      } else {
        addClue(params).then(res => {
          this.loading = false;
          this.queryList();
          this.$refs.addDialog.closeFun();
        }).catch(error => {
          this.loading = false;
        })
      }

    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/pageStyle.scss";

.shadowShell{
  height: calc(100vh - 160px);
  background-color: #ffffff;
  overflow-y: auto;
}
.cluesWrap {

  .title {
    font-size: 24px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .span-1 {
      font-size: 24px;
      display: flex;
      align-items: center;

    }


  }

  .search-input {
    width: 220px;
  }

  .options-wrap {
    display: inline-block;
    // margin-left: 24px;

    >div {
      display: inline-block;

      .el-button {
        margin-right: 8px;
      }
    }

    .options-label {
      margin-right: 8px;
    }
  }


  .el-dialog {
    .tit {
      margin-bottom: 5px;

      >i {
        font-size: 12px;
      }
    }
  }

  .topDrop {
    margin-left: 10px;
  }
}
</style>